<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>
            <a href="#/home">首页</a>
        </li>
        <li>
            <a href="#/about">关于</a>
        </li>
    </ul>

    <div id="app">

    </div>

    <script>
        const routes = [
            {
                path: '/home',
                component: () => {
                    return '<h2>首页页面</h2>';
                }
            },
            {
                path: '/about',
                component: () => {
                    return '<h3>about页面</h3>';
                }
            }
        ]

        window.addEventListener('DOMContentLoaded', () => {
            routerView(location.hash)
        })

        window.addEventListener('hashchange', () => {
            routerView(location.hash)
        })

        const app = document.querySelector('#app');
        function routerView(localHash) {
            // 去 routes 数组中 查找 localHash 值在哪一项中
            // 如果找到了 就将这一项中的 component 执行结果放进 app 日期中
            const index = routes.findIndex((item) => {
                return '#' + item.path === localHash
            })

            app.innerHTML = routes[index].component()
        }
    </script>
</body>

</html>